<template>
  <div>
    <v-chart :forceFit="true" :height="height" :data="data">
      <v-coord type="rect" direction="LB" />
      <v-tooltip />
      <v-axis data-key="country" :label="label" />
      <v-bar position="country*population" />
    </v-chart>
  </div>
</template>

<script lang="ts">
const DataSet = require("@antv/data-set");
import { Component, Vue, Prop, Emit } from "vue-property-decorator";

@Component({
  name: "Chart-BarChat",

  layout: "menu"
})
export default class ChartBarChat extends Vue {
  sourceData: any[] = [
    { country: "中国", population: 131744 },
    { country: "印度", population: 104970 },
    { country: "美国", population: 29034 },
    { country: "印尼", population: 23489 },
    { country: "巴西", population: 18203 }
  ];
  data: any[] = [];
  label: object = { offset: 12 };
  created() {
    const dv = new DataSet.View().source(this.sourceData);
    dv.transform({
      type: "sort",
      callback(a, b) {
        return a.population - b.population > 0;
      }
    });
    this.data = dv.rows;
  }
}
</script>

<style lang='less' scoped>
</style>